// NetFlow 网络流量管理系统 - 系统设置页面脚本

// 页面加载完成后初始化
window.addEventListener('load', function() {
    // 初始化标签页切换
    initTabs();
    
    // 初始化编辑按钮
    initEditButtons();
    
    // 初始化滑动条
    initSliders();
    
    // 初始化保存设置按钮
    initSaveButtons();
});

// 初始化标签页切换功能
function initTabs() {
    const tabItems = document.querySelectorAll('.tab-item');
    
    tabItems.forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有标签页和内容的活动状态
            document.querySelectorAll('.tab-item').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelectorAll('.tab-pane').forEach(pane => {
                pane.classList.remove('active');
            });
            
            // 设置当前标签页和内容为活动状态
            this.classList.add('active');
            const tabId = this.getAttribute('data-tab');
            document.getElementById(tabId).classList.add('active');
        });
    });
}

// 初始化编辑按钮功能
function initEditButtons() {
    const editButtons = document.querySelectorAll('.btn-small');
    
    editButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 获取当前行
            const row = this.closest('tr');
            const cells = row.querySelectorAll('td');
            
            // 创建编辑表单
            const form = document.createElement('form');
            form.className = 'edit-form';
            
            // 根据不同的表格创建不同的编辑表单
            if (row.closest('#app-priority')) {
                // 应用优先级表单
                form.innerHTML = `
                    <h3>编辑应用优先级</h3>
                    <div class="form-group">
                        <label>应用类型</label>
                        <input type="text" value="${cells[0].textContent}" readonly>
                    </div>
                    <div class="form-group">
                        <label>优先级</label>
                        <select>
                            <option value="1" ${cells[1].textContent.includes('1') ? 'selected' : ''}>1 (最高)</option>
                            <option value="2" ${cells[1].textContent.includes('2') ? 'selected' : ''}>2 (高)</option>
                            <option value="3" ${cells[1].textContent.includes('3') ? 'selected' : ''}>3 (中)</option>
                            <option value="4" ${cells[1].textContent.includes('4') ? 'selected' : ''}>4 (低)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>最小带宽 (%)</label>
                        <input type="number" min="0" max="100" value="${cells[2].textContent}">
                    </div>
                    <div class="form-group">
                        <label>最大带宽 (%)</label>
                        <input type="number" min="0" max="100" value="${cells[3].textContent}">
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-primary save-edit">保存</button>
                        <button type="button" class="btn cancel-edit">取消</button>
                    </div>
                `;
            } else if (row.closest('#user-priority')) {
                // 用户优先级表单
                form.innerHTML = `
                    <h3>编辑设备优先级</h3>
                    <div class="form-group">
                        <label>设备标识</label>
                        <input type="text" value="${cells[0].textContent}">
                    </div>
                    <div class="form-group">
                        <label>类型</label>
                        <select>
                            <option value="ip" ${cells[1].textContent === 'IP地址' ? 'selected' : ''}>IP地址</option>
                            <option value="mac" ${cells[1].textContent === 'MAC地址' ? 'selected' : ''}>MAC地址</option>
                            <option value="subnet" ${cells[1].textContent === 'IP网段' ? 'selected' : ''}>IP网段</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>优先级</label>
                        <select>
                            <option value="1" ${cells[2].textContent.includes('1') ? 'selected' : ''}>1 (最高)</option>
                            <option value="2" ${cells[2].textContent.includes('2') ? 'selected' : ''}>2 (高)</option>
                            <option value="3" ${cells[2].textContent.includes('3') ? 'selected' : ''}>3 (中)</option>
                            <option value="4" ${cells[2].textContent.includes('4') ? 'selected' : ''}>4 (低)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>最小带宽 (%)</label>
                        <input type="number" min="0" max="100" value="${cells[3].textContent}">
                    </div>
                    <div class="form-group">
                        <label>最大带宽 (%)</label>
                        <input type="number" min="0" max="100" value="${cells[4].textContent}">
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-primary save-edit">保存</button>
                        <button type="button" class="btn cancel-edit">取消</button>
                    </div>
                `;
            } else if (row.closest('#time-priority')) {
                // 时间优先级表单
                form.innerHTML = `
                    <h3>编辑时间优先级</h3>
                    <div class="form-group">
                        <label>时间段</label>
                        <input type="text" value="${cells[0].textContent}">
                    </div>
                    <div class="form-group">
                        <label>应用类型</label>
                        <select>
                            <option value="video" ${cells[1].textContent === '视频会议' ? 'selected' : ''}>视频会议</option>
                            <option value="voice" ${cells[1].textContent === '语音通话' ? 'selected' : ''}>语音通话</option>
                            <option value="game" ${cells[1].textContent === '在线游戏' ? 'selected' : ''}>在线游戏</option>
                            <option value="media" ${cells[1].textContent === '流媒体' ? 'selected' : ''}>流媒体</option>
                            <option value="web" ${cells[1].textContent === '网页浏览' ? 'selected' : ''}>网页浏览</option>
                            <option value="download" ${cells[1].textContent === '文件下载' ? 'selected' : ''}>文件下载</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>优先级调整</label>
                        <select>
                            <option value="highest" ${cells[2].textContent.includes('最高') ? 'selected' : ''}>提高到最高优先级</option>
                            <option value="high" ${cells[2].textContent.includes('高') ? 'selected' : ''}>提高到高优先级</option>
                            <option value="medium" ${cells[2].textContent.includes('中') ? 'selected' : ''}>提高到中优先级</option>
                            <option value="low" ${cells[2].textContent.includes('低') ? 'selected' : ''}>降低到低优先级</option>
                        </select>
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-primary save-edit">保存</button>
                        <button type="button" class="btn cancel-edit">取消</button>
                    </div>
                `;
            }
            
            // 创建模态框
            const modal = document.createElement('div');
            modal.className = 'modal';
            modal.appendChild(form);
            
            // 添加模态框到页面
            document.body.appendChild(modal);
            
            // 显示模态框
            setTimeout(() => {
                modal.classList.add('show');
            }, 10);
            
            // 保存按钮事件
            const saveButton = modal.querySelector('.save-edit');
            saveButton.addEventListener('click', function() {
                // 获取表单数据
                const formData = {};
                modal.querySelectorAll('input, select').forEach(input => {
                    if (input.type !== 'button') {
                        formData[input.previousElementSibling.textContent.trim()] = input.value;
                    }
                });
                
                // 更新表格数据（这里只是模拟，实际应该发送到服务器）
                if (row.closest('#app-priority')) {
                    cells[1].textContent = modal.querySelector('select').options[modal.querySelector('select').selectedIndex].text;
                    cells[2].textContent = modal.querySelector('input[type="number"]:nth-of-type(1)').value;
                    cells[3].textContent = modal.querySelector('input[type="number"]:nth-of-type(2)').value;
                } else if (row.closest('#user-priority')) {
                    cells[0].textContent = modal.querySelector('input[type="text"]').value;
                    cells[1].textContent = modal.querySelector('select:nth-of-type(1)').options[modal.querySelector('select:nth-of-type(1)').selectedIndex].text;
                    cells[2].textContent = modal.querySelector('select:nth-of-type(2)').options[modal.querySelector('select:nth-of-type(2)').selectedIndex].text;
                    cells[3].textContent = modal.querySelector('input[type="number"]:nth-of-type(1)').value;
                    cells[4].textContent = modal.querySelector('input[type="number"]:nth-of-type(2)').value;
                } else if (row.closest('#time-priority')) {
                    cells[0].textContent = modal.querySelector('input[type="text"]').value;
                    cells[1].textContent = modal.querySelector('select:nth-of-type(1)').options[modal.querySelector('select:nth-of-type(1)').selectedIndex].text;
                    cells[2].textContent = modal.querySelector('select:nth-of-type(2)').options[modal.querySelector('select:nth-of-type(2)').selectedIndex].text;
                }
                
                // 关闭模态框
                modal.classList.remove('show');
                setTimeout(() => {
                    document.body.removeChild(modal);
                }, 300);
                
                // 显示保存成功提示
                showNotification('设置已保存');
            });
            
            // 取消按钮事件
            const cancelButton = modal.querySelector('.cancel-edit');
            cancelButton.addEventListener('click', function() {
                // 关闭模态框
                modal.classList.remove('show');
                setTimeout(() => {
                    document.body.removeChild(modal);
                }, 300);
            });
        });
    });
}

// 初始化滑动条功能
function initSliders() {
    const sliders = document.querySelectorAll('.slider');
    
    sliders.forEach(slider => {
        // 获取对应的值显示元素
        const valueDisplay = slider.nextElementSibling;
        
        // 设置初始值
        valueDisplay.textContent = slider.value + '%';
        
        // 添加事件监听 - 实时更新显示值
        slider.addEventListener('input', function() {
            valueDisplay.textContent = this.value + '%';
        });
        
        // 添加事件监听 - 滑动结束后触发总和检查
        slider.addEventListener('change', function() {
            // 确保所有滑动条的总和为100%
            validateSliderTotals();
        });
    });
}

// 验证滑动条总和为100%
function validateSliderTotals() {
    // 获取所有滑动条
    const sliders = document.querySelectorAll('.slider');
    let total = 0;
    
    // 计算总和
    sliders.forEach(slider => {
        total += parseInt(slider.value);
    });
    
    // 如果总和不是100%，显示警告
    if (total !== 100) {
        showNotification(`警告：带宽分配总和为${total}%，应为100%`, 'warning');
    }
}

// 初始化保存设置按钮
function initSaveButtons() {
    const saveButtons = document.querySelectorAll('.btn-primary');
    
    saveButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 获取表单数据
            const form = this.closest('form');
            const formData = {};
            
            form.querySelectorAll('input, select').forEach(input => {
                if (input.id) {
                    formData[input.id] = input.value;
                }
            });
            
            // 模拟保存到服务器（实际应该发送AJAX请求）
            console.log('保存设置:', formData);
            
            // 显示保存成功提示
            showNotification('设置已保存');
        });
    });
}

// 显示通知
function showNotification(message, type = 'success') {
    // 创建通知元素
    const notification = document.createElement('div');
    notification.className = 'notification notification-' + type;
    notification.textContent = message;
    
    // 添加到页面
    document.body.appendChild(notification);
    
    // 显示通知
    setTimeout(() => {
        notification.classList.add('show');
    }, 10);
    
    // 自动关闭通知
    setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// 添加通知和模态框样式
document.addEventListener('DOMContentLoaded', function() {
    // 创建样式元素
    const style = document.createElement('style');
    style.textContent = `
        /* 模态框样式 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        
        .modal.show {
            opacity: 1;
            visibility: visible;
        }
        
        .edit-form {
            background-color: white;
            padding: 20px;
            border-radius: 6px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
        }
        
        .edit-form h3 {
            margin-top: 0;
            margin-bottom: 20px;
            color: #2c3e50;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }
        
        .form-actions button {
            margin-left: 10px;
        }
        
        /* 通知样式 */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1001;
            opacity: 0;
            transform: translateY(-20px);
            transition: opacity 0.3s, transform 0.3s;
        }
        
        .notification.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .notification-success {
            background-color: #2ecc71;
        }
        
        .notification-warning {
            background-color: #f39c12;
        }
        
        .notification-error {
            background-color: #e74c3c;
        }
    `;
    
    // 添加样式到页面
    document.head.appendChild(style);
});
